<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0; 
      padding: 0;
    }
      ul{
        width: 80%;
        margin: 20px auto;
        background: yellowgreen;
        height: 600px;
        list-style: none;
        /* flex布局的父元素的 属性 */
        /* 弹性盒子布局  子元素 可以是块级元素 和 行内元素 行内块元素  */
        /* 1.默认主轴 是x轴  */
        
        display: flex;

        /* 主轴的排列方式 */
        /* 2. justify-content: 
            flex-start 从左到右排列  默认 （效果类似于每个子元素都float:left）;
            flex-end   从右到左    （效果 类似于每个子元素都float:right;）
            center  居中 
            space-between 两端对齐，项目之间的间隔都相等
            space-around  每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */
        justify-content: space-between; 
       /* 交叉轴的排列方式 */
       /*3. align-items ： 
           center  居中  
           flex-start 交叉轴的起点对齐
           flex-end 交叉轴的终点对齐
           baseline :项目的第一行文字的基线对齐
           stretch 如果项目未设置高度或设为auto，将占满整个容器的高度。 */
        align-items:center;

        /*4 flex-direction改变主轴方向 
        默认是x轴
        row ---默认
         row-reverse  默认x轴 反转 
         column  y轴为主轴  
         column-reverse y轴 反转*/
        flex-direction: row;

        /* 5. 是否换行 flex-wrap
        nowrap 不换行 
        wrap 换行
        wrap-reverse 反正换行
         */
        flex-wrap: wrap ;
        /* 6  align-content属性定义了多根轴线的对齐方式
        flex-start：与交叉轴的起点对齐。
        flex-end：与交叉轴的终点对齐。
        center：与交叉轴的中点对齐。
        space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
        space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
      */
        /* align-content:   center; */
      }
      ul li{
        width: 17%;
        font-size: 20px;
        background: salmon;
        text-align: center;
      }
     
      li:nth-child(1){
        /* padding-top: 30px; */
      }
      .corssfire{
        /*  flex子元素的属性   */
            /* 7. order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */
            order:-1;
            /* //8flex-grow定义元素的放大倍数  存在剩余空间
            占满剩余空间 */
            /*  flex-grow:1; */
            /* flex-grow有一个简写 */

            /* 占满剩余空间 9 flex:1 就是 flex-grow和 flex-shrink 的简写  */
            /* flex:1;   */

            align-self: flex-start;
      }
      .lengendary{
        flex-shrink:2;
        order:-2;
      } 
      /* 10. align-self属性允许单个项目有与其他项目不一样的对齐方式
      center 居中
      flex-start 
      flex-end 
      stretch */
      .kinghonor{
        align-self:stretch;
      }
  </style>
</head>
<body>
  <!-- 
      弹性盒子布局 flex布局
   -->
      <ul class="list">
        <li class="kinghonor">
          王者荣耀
        </li>
        <li>英雄联盟</li>
        <!-- <li>绝对求生</li>
        <li>qq农场</li>   
        <li>qq飞车</li> -->
        <li class="corssfire">穿越火线</li>
         <!-- <li>qq炫舞</li> 
        <li>劲舞团</li>
        <li>暴力摩托</li> -->
        <li class="lengendary">传奇</li> 

      </ul>
            <!--
                1.今日知识点  抄2遍
                2. 移动端布局产品页面
              -->

</body> 
</html>